<!--
 * @Author: Lw
 * @Date: 2022-08-29 15:29:24
 * @LastEditors: Lw
 * @LastEditTime: 2022-09-27 14:37:58
-->
<template>
  <n-modal
    v-model:show="show"
    :style="style"
    :unstableShowMask="false"
    :on-after-leave="() => emit('update:show', false)"
  >
    <n-card :header-style="headerStyle" :content-style="contentStyle">
      <template #header>
        <n-tabs :default-value="titles[0].value" type="line" animated :on-update:value="handleActive">
          <template #suffix>
            <n-button size="small" quaternary style="padding: 0 4px; margin: 0 -4px 0 0" @click="handleClose">
              <template #icon>
                <n-icon size="24">
                  <CloseOutline />
                </n-icon>
              </template>
            </n-button>
          </template>
          <n-tab v-for="(item, index) in titles" :tab="item.label" :name="item.value" :key="index"></n-tab>
        </n-tabs>
      </template>
      <n-collapse-transition v-for="(item, index) in titles" :key="index" :show="activeValue === item.value">
        <slot :name="item.value"></slot>
      </n-collapse-transition>
    </n-card>
  </n-modal>
  <!-- <TabDialog
    v-model:show="dialogShow"
    :titles="[
      { label: '基础信息', value: 'info' },
      { label: '位置信息', value: 'address' },
    ]"
  >
    <template #info> 分页1 </template>
    <template #address> 分页2 </template>
  </TabDialog> -->
</template>

<script setup>
  import { CloseOutline } from '@vicons/ionicons5'
  const emit = defineEmits(['update:show'])
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '960px',
    },
    titles: {
      type: Array,
      default: () => [
        { label: '基础信息', value: 'info' },
        { label: '位置信息', value: 'address' },
      ],
    },
    maxHeight: {
      type: String,
      default: '75vh',
    },
  })
  const activeValue = ref()
  const show = computed({
    get: () => props.show,
    set: (val) => emit('update:show', val),
  })
  activeValue.value = props.titles[0].value
  const handleActive = (val) => {
    activeValue.value = val
  }
  const handleClose = () => {
    emit('update:show', false)
  }
  const style = {
    width: props.width,
    'background-color': 'rgba(230, 234, 243, 0.4)',
    'backdrop-filter': 'blur(10px)',
    'border-color': '#F9FBFF',
  }
  const headerStyle = {
    'background-color': 'rgba(255, 255, 255, 0.4)',
    'border-radius': '20px 20px 0px 0px',
    height: '46px',
    'line-height': '46px',
    padding: '16px 16px 12px 16px',
    'font-weight': 'bold',
    'font-size': '16px',
    color: '#4D5E80',
  }
  const contentStyle = {
    'border-radius': '0 0 20px 20px',
    padding: '32px 24px 24px 24px',
    'max-height': props.maxHeight,
    overflow: 'auto',
  }
</script>

<style lang="scss" scoped></style>
